import { useRandomColor } from "./useRandomColor.js";
import {useSequenceColor} from './useSequenceColor.js';
import * as antd from 'antd'

 const CustomHooks = () => {
    const colors = ["red","green","blue","yellow"];
    const [color,changeColor] = useRandomColor(colors,"red");


    const colors2 = ["#33FFCC","#B88A00","#F5B800","#FF6633"];
    const [count,color2,nextColor] = useSequenceColor(colors2);

    return (
        <div
            style={{border:"1px solid #ccc",padding:8}}
        > 
         这个例子完美的诠释了如何hook对state的复用场景
         <antd.Divider></antd.Divider>
        <h2 style={{background:color}}> Click below button to change Color</h2>
        <antd.Button onClick={changeColor}> Change Color </antd.Button>  Current Color：{color}

        <antd.Divider></antd.Divider>

        <h2 style={{background:color2}}> Click below button to change Color</h2>
        <antd.Button onClick={nextColor}> Change Color </antd.Button>  Current Color：{color2} , Count : {count}

        

       
        </div>
    )

}

export default CustomHooks